<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="450">
    <!-- <text>
      <tspan x="0" dy="1.2em">Hello SVG!</tspan>
    </text> -->
    <!-- <path d="m 0 12 a 20 20 90 0 0 -20 20 h 111 h 22 h 100 v -20" stroke="pink" fill="yellow"></path> -->
    <!-- <path d="M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 9 4 L 12 3 L 10.2 2.8 L 10 1"
      fill="skyblue" stroke="black"></path> -->
    
      <!-- group -->
    <g>
      <path d="M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 9 4 L 12 3 L 10.2 2.8 L 10 1"
      fill="skyblue" stroke="black"></path>
    </g>

    <g>
    <!-- 坐标 -->
    <!-- 坐标轴 -->
      <line x1="0" y1="120" x2="240" y2="120" stroke="black"></line>
      <!-- 坐标刻度 -->
      <g>
        <g>
          <line x1="0" y1="120" x2="240" y2="120" stroke="black"></line>
          <line x1="0" y1="120" x2="240" y2="120" stroke="black"></line>
          <line x1="0" y1="120" x2="240" y2="120" stroke="black"></line>
          <line x1="0" y1="120" x2="240" y2="120" stroke="black"></line>
        </g>
        <g>
          <!-- 坐标刻度值 -->
        </g>
      </g>
    </g>
    <!-- 纵坐标 -->
    <g>
      <line x1="0" y1="0" x2="0" y2="240" stroke="black"></line>
      <!-- 坐标刻度 -->
      <g>
        <g>
          <!-- 刻度 -->
        </g>
        <g>
          <!-- 坐标刻度值 -->
        </g>
      </g>
    </g>
  </svg>
</template>

<script>
export default {
  setup(){

  }
 }
</script>

<style scoped>

</style>